<template>
  <div class="fx" v-show="isPageShow">
    <div class="flex flex-between align-center fx-header">
      <div class="fx-header-r">
        <!-- <div class="fx-header-r-avatar"><img src="https://public.qiniu.chenyu666.com/user_pic.jpeg?imageslim" alt="">
        </div> -->
        <div class="fx-header-r-name">主任医师：{{userInfo.doctorBaseInfo.upDoctorName}}</div>
      </div>
    </div>
    <div class="fx-main">
      <div id="chart"></div>
      <!-- 出院人数 -->
      <div id="chart1"></div>
      <div id="chart2"></div>
      <!-- 患者反馈统计看板 -->
      <div id="chart3"></div>
      <!-- 药品存量统计看板 -->
      <!-- 分类列表  患者列表 -->
      <div class="flex flex-between align-center fx-header1">
        <div class="fx-header1-l">
          患者反馈记录
        </div>
        <div class="fx-header1-r">
          <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect($event)">
            <template #reference>
              <van-button type="default" color="#fff" style="color: #333;height: 30px;">{{selectTag}}<van-icon name="arrow-down" color="#B3B3B3"/></van-button>
            </template>
          </van-popover>
        </div>
      </div>
      <div class="fx-list">
        <div class="flex flex-between align-center fx-list-info" v-for="item in patientList" :key="item.id">
          <div class="fx-list-info-name">{{item.userEntity.name}}</div>
          <van-button plain type="primary" style="height:30px;" color="#08C68E" @click="gotoProcess(item.userEntity.id)">查看详情</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {createApp} from 'vue';
import {Toast} from 'vant';

const app = createApp();
app.use(Toast);
import * as echarts from 'echarts'

import {doctorTj} from '@/api/index.js'
export default {
  data() {
    return {
      isPageShow: false,
      username: "",
      activeIndex: 0,
      selectPatientIndex: '',
      userInfo: '',
      userFeedbackTags: [],
      checkedType: 0,
      patientList: [],
      userFeedbackMapList: [],
      showPopover: false,
      actions: [],
      selectTag: ''
    }
  },
  created() {
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
    });
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo')).config;
    this.doctorTjFunc();
  },
  mounted() {

  },
  methods: {
    onSelect(action) {
      console.log('tag', action)
      this.selectTag = action.text;
      this.checkedType = action.id;
      this.patientList = this.userFeedbackMapList[action.id];
    },
    gotoProcess(userId) {
      this.$router.push({path: '/process', query: {userid: userId}})
    },
    // 医生统计数据
    doctorTjFunc() {
      doctorTj().then(res => {
        console.log('tj', res.data)
        let aData = JSON.parse(JSON.stringify(res.data));
        let arr = JSON.parse(JSON.stringify(res.data.userFeedbackTags));
        arr.forEach(item => {
          let aJson = {
            id: item.itemKey,
            text: item.itemValue
          }
          this.actions.push(aJson)
        })
        this.userFeedbackTags = res.data.userFeedbackTags;

        // 默认选中的反馈 患者
        this.userFeedbackMapList = aData.userFeedbackMapList;
        let aId = this.userFeedbackTags[0].itemKey;
        this.selectTag = this.userFeedbackTags[0].itemValue;
        this.checkedType = aId;
        this.patientList = aData.userFeedbackMapList[aId];
        setTimeout(() => {
          this.$toast.clear();
          this.isPageShow = true;
          this.$nextTick(() => {
            this.initEcharts()
            this.echartsFunc()
            this.patientTjFunc()
            this.ypChartFunc()
          })
        }, 1000)
      })
    },
    // 获取选择的分类  患者
    changeTagFunc(val) {
      console.log('val', val)
      this.patientList = this.userFeedbackMapList[val];
    },
    // 折线图
    initEcharts() {
      let myChart = echarts.init(document.querySelector('#chart'))
      let option = {
        title: {
          text: "在院人数",
        },
        legend: {
          right: 0,
        },
        tooltip: {},
        dataset: {
          source: [
            ['product', '康复科', '内科'],
            ['肝癌', 43, 85],
            ['胃癌', 83, 73],
            ['直肠癌', 86, 65],
            ['肺癌', 72, 53]
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [{type: 'bar'}, {type: 'bar'}]
      };
      myChart.setOption(option)
    },
    // 饼图
    echartsFunc() {
      let myChart = echarts.init(document.querySelector('#chart1'))
      let option = {
        title: {
          text: "出院人数",
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '内科出院人数',
            type: 'pie',
            selectedMode: 'single',
            radius: ['25%', '41%'],
            label: {
              position: 'inner',
              fontSize: 14
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 108, name: '肝癌'},
              {value: 75, name: '肺癌'},
              {value: 210, name: '胃癌'},
              {value: 151, name: '直肠癌'},
            ]
          },
          {
            name: '康复科出院人数',
            type: 'pie',
            radius: ['50%', '65%'],
            labelLine: {
              length: 30
            },
            data: [
              {value: 1048, name: '肝癌'},
              {value: 335, name: '肺癌'},
              {value: 310, name: '胃癌'},
              {value: 251, name: '直肠癌'},
            ]
          }
        ]
      };
      myChart.setOption(option)
    },
    // 患者反馈统计看板
    patientTjFunc() {
      let myChart = echarts.init(document.querySelector('#chart2'))
      let option = {
        color: ['#5eb8bf', '#44a3aa', '#3c9096'],
        title: {
          text: '患者反馈'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          right: 0,
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['直肠癌', '胃癌', '肝癌', '肺癌']
        },
        series: [
          {
            name: '疼痛',
            type: 'bar',
            data: [18, 23, 29, 10]
          },
          {
            name: '饮食大小便',
            type: 'bar',
            data: [19, 23, 31, 12]
          },
          {
            name: '其他',
            type: 'bar',
            data: [19, 24, 10, 15]
          }
        ]
      };
      myChart.setOption(option)
    },
    // 点击查看患者反馈
    selectPatientFunc(idx) {
      this.selectPatientIndex = idx
    },
    // 药品存量看板
    ypChartFunc() {
      let myChart = echarts.init(document.querySelector('#chart3'))
      let option = {
        title: {
          text: '药品存量看板'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['8.10', '9.10', '10.10', '11.10', '12.10', '01.10', '02.10']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'xm-1',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'xm-2',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'xm-3',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'xm-4',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'xm-5',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      myChart.setOption(option)
    }
  }
}
</script>
<style scoped>
.fx {
  width: auto;
  height: auto;
  padding: 0px 0px 80px;
  margin-bottom: 0px !important;
  background-color: #F1F1F1;
}

#chart, #chart1, #chart2, #chart3 {
  width: 100%;
  height: 300px;
  background-color: #fff;
  margin-bottom: 10px;
}

.fx-header {
  width: auto;
  height: auto;
  padding: 15px 15px;
  background-color: #fff;
}

.fx-header-l {
  width: auto;
  height: auto;
}

.fx-header-l-title {
  width: auto;
  height: auto;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  text-indent: 11px;
}

.fx-header-l-line {
  width: auto;
  height: auto;
  color: #666;
  font-size: 14px;
  font-weight: 400;
  margin-top: 6px;
}

.fx-header-l-line i {
  display: block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  background-color: aquamarine;
}

.fx-header-r {
  width: 100%;
  height: auto;
}

.fx-header-r-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f2f2f2;
}

.fx-header-r-avatar img {
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.fx-header-r-name {
  width: 100%;
  height: auto;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.fx-main{
  width: auto;
  height: auto;
  padding: 10px 8px;
}
.fx-list {
  width: auto;
  height: auto;
  margin-top: 10px;
}
.fx-list-info{
  width: auto;
  height: auto;
  padding: 8px 10px;
  margin-bottom: 5px;
  background-color: #fff;
}
.fx-list-info-name{
  width: auto;
  height: auto;
  color: #333;
  font-size: 14px;
  font-weight: 400;
}


.fx-list-l,.fx-list-r{
  width: 45%;
  height: 200px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ececec;
}
.fx-list-l-title,.fx-list-r-title{
  width: auto;
  height: 40px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 0 10px;
  border-bottom: 1px solid #ececec;
}
.fx-list-l-main,.fx-list-r-main{
  width: auto;
  height: auto;
  flex: 1;
  overflow: hidden;
  overflow-y: scroll;
  padding: 0 15px;
}
.fx-list-l-main-content{
  width: 100%;
  height: auto;
  padding: 10px 0px;
}

.fx-list-r-main-content {
  width: auto;
  height: auto;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 10px 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fx-list-info1 {
  color: #fff;
}

.fx-header1{
  width: auto;
  height: auto;
  padding: 0 12px;
}
.fx-header1-l{
  width: auto;
  height: auto;
  color: #333;
  font-size: 18px;
  font-weight: 500;
}
</style>
